视频播放组件实战【LivePlayer H5播放器】 |
您所在的位置：网站首页 › 播放live is › 视频播放组件实战【LivePlayer H5播放器】 |
视频播放组件实战【LivePlayer H5播放器】
|
在公司项目开发中，有一个项目里面需要做一个视频播放的功能，播放方式是调用海康平台提供的接口获取流地址来进行视频的播放并且最重要的是需要支持flash。由于前端用的Vue，对比了几个，最后选择了LivePlayer H5播放器。 官网介绍：H5直播/点播播放器，使用简单，功能强大， 免费使用。 官网地址：https://www.liveqing.com/docs/manuals/LivePlayer.html github源码地址：https://github.com/livegbs/GB28181-Server 因为官网只是做了介绍，并没有具体的详细API，可以参考github源码，如果还不能解决问题，可以在官网加官方QQ群，会有专业人员帮忙解答。 有如下特点： 支持MP4播放；支持m3u8/HLS播放;支持HTTP-FLV/WS-FLV播放;支持RTMP播放;支持直播和点播播放;支持播放器快照截图;支持点播多清晰度播放;支持全屏或比例显示;自带的flash支持极速和流畅模式;自带的flash支持HTTP-FLV播放;自动检测IE浏览器兼容播放;支持自定义叠加层;v1.7.9
方法(Medthod) play 播放pause 暂停paused 获取暂停状态getCurrentTime 获取当前播放时间进度, 同步返回播放时间进度数据snap 外部 API 方式获取快照, 快照获取成功后, 触发 snapOutside EventgetMuted 获取静音状态setMuted 设置静音状态isFullscreen v1.7.6 获取全屏状态requestFullscreen v1.7.6 触发全屏, 需要放置到交互事件回调中调用, 如果已处在全屏状态, 则退出全屏getVolume v1.7.7 获取音量setVolumev1.7.7 设置音量, 0~1事件(Event) message m3u8 加载失败时触发通知消息, 参数: { type: ‘’, message: ‘’}error 播放器出错回调, 参数: Error Objectended 播放结束, 参数: 无timeupdate 进度更新, 参数: 当前时间进度pause 暂停, 参数: 当前时间进度play 播放, 参数: 当前时间进度snapOutside 外部快照回调, 参数: 快照 Base64 数据snapInside 内部快照回调, 由控制栏快照按钮触发, 参数: 快照 Base64 数据安装使用(Install) 一、安装：npm install @liveqing/liveplayer 二、编辑webpack.xxx.config.js： const CopyWebpackPlugin = require('copy-webpack-plugin'); ...... // copy js lib and swf files to dist dir new CopyWebpackPlugin([ { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'}, { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'}, { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'} ]), ......注意：本地开发的配置文件和生产环境的都要配置。 三、引入依赖js 在index.html中引入： xxx ... ... ...四、编辑 Vue 组件 ...... import LivePlayer from '@liveqing/liveplayer' ...... components: { LivePlayer } ......实战：播放器组件化 窗口{{rowIdx*winNum + colIdx + 1}}：{{cameraName}} HLS流 RTMP流 关闭 import LivePlayer from '@liveqing/liveplayer' import { getPreviewURLs,controllerHik } from '../../../../api/zhgd/video/hikVideo.js' export default { name: 'myVideoPlayer', props: ['cameraId', 'videoUrl', 'videoTitle', 'cameraName', 'rowIdx', 'colIdx', 'winNum'], components: { LivePlayer }, data() { return { showPTZ: 'showPTZ' + this.rowIdx + this.colIdx, iconClass: 'el-icon-d-arrow-right', ptzTop: 20, isShowTab: this.videoUrl !== '', protocol: 'hls', bLoading: false // ptzRight:50, // videoUrl: 'rtmp://58.200.131.2:1935/livetv/hunantv' } }, watch: { protocol(val) { console.log(this.rowIdx + '---' + this.colIdx + val) const params = { t: Math.random(), code: this.cameraId, protocol: val, streamType: '1' }; getPreviewURLs(params).then(data => { if (data.code === '0') { let purl = data.data.url; if (window.location.host.indexOf('2.2.2.2') === 0) { purl = data.data.url.replace('36.32.24.38', '2.2.2.2'); } this.videoUrl = purl; } }); } }, methods: { chgTabState() { if (this.iconClass === 'el-icon-d-arrow-right') { $('#showPTZ' + this.rowIdx + this.colIdx + ' > .left-panel-accordion-content').css('width', '190px'); // $('#showPTZ' + this.rowIdx + this.colIdx + ' > .showPTZ').css('right', '0px'); this.iconClass = 'el-icon-d-arrow-left' } else { $('#showPTZ' + this.rowIdx + this.colIdx + ' > .left-panel-accordion-content ').css('width', '25px'); // $('#showPTZ' + this.rowIdx + this.colIdx + ' > .showPTZ').css('right', '0px'); this.iconClass = 'el-icon-d-arrow-right' } }, close() { this.$emit('close'); }, controlPtz(code){ var params={t:Math.random(),cameraId:this.cameraId,code:code,action:"0"}; controllerHik(params).then(data => { if(data.code==0){ window.setTimeout(() => { params.action = "1"; controllerHik(params).then(data => { if(data.code==0){ }else if(data.code=="0x01900050"){ alert("设备操作失败！"); }else{ alert(data.msg); } }); }, 2000); }else if(data.code=="0x01900050"){ alert("设备操作失败！"); }else{ alert(data.msg); } }); } }, mounted() { $('#showPTZ' + this.rowIdx + this.colIdx + ' > .left-panel-accordion-content').css('width', '25px'); $('#showPTZ' + this.rowIdx + this.colIdx + ' > .showPTZ').css('right', '0px'); } } .showPTZ{ height: 110px !important; position: relative; overflow: hidden !important; display: block; /*background-color:rgba(43, 51, 63, 0.7)*/ background-color:rgba(255, 255, 255, 0.7) } .ptz-panal-up { background-image: none; width: 160px; margin-left: 20px; } .ptz-panal-up-left { background-image: none; } .ptz-panal-up-right { background-image: none; top:8px; } .ptz-speed{ background-image: none; } .left-panel-accordion-content { width: 190px; } .el-icon-d-arrow-left,.el-icon-d-arrow-right{ position: absolute; top:40px; font-size: 25px; cursor: pointer; color: black; } .ptz-auto { background-position: -801px top; } .ptz-up { background-position: -549px top; } .ptz-down { background-position: -591px top; } .ptz-left { background-position: -758px top; } .ptz-right { background-position: -717px top; } .ptz-up-left { background-position: -841px top; } .ptz-up-right { background-position: -633px top; } .ptz-down-left { background-position: -883px top; } .ptz-down-right { background-position: -675px top; } .ptz-zoomin .icon { background-position: -1079px top; } .ptz-zoomout .icon { background-position: -959px top; } .ptz-focusin .icon { background-position: -1119px top; } .ptz-focusout .icon { background-position: -999px top; } .ptz-irisout .icon { background-position: -1159px top; } .ptz-irisin .icon { background-position: -1039px top; } /*>>> .video-wrapper .video-title {*/ /* max-width: 400px;*/ /* top:50px;*/ /* }*/说明： props: [‘cameraId’, ‘videoUrl’, ‘videoTitle’, ‘cameraName’, ‘rowIdx’, ‘colIdx’, ‘winNum’] cameraId：为摄像头id，用于向后端发起请求调用海康接口获取流地址videoUrl：播放视频的流地址videoTitle：播放窗口右上角标题cameraName：当前选中的摄像头名称rowIdx，colIdx：播放窗口的横纵坐标（用于标识第几个播放窗口）winNum：窗口序号 由于播放视频前需要取流，因为网络等问题可能会导致加载时间过长，默认不显示加载状态，加载样式可以自定义，关键代码：# 属性 v-loading="bLoading" element-loading-background="#000" :loading.sync="bLoading" 效果图： 如果想验证取到的流地址是不是有问题，可以通过vlc这个专业的视频播放软件来验证。 
效果图： 调用该组件相关代码： winRows: [ { cols: [ { span: 24, url: '', title: '', cameraId: '' } ] } ], winNum: 1 #分屏方法 setWinNum(winNum) { const rows = Math.sqrt(winNum); this.winNum = rows; // 原来的组件数据存起来 const oriArray = []; for (let i = 0; i if (this.winRows[i].cols[j].url !== '') { oriArray.push(this.winRows[i].cols[j]) } } } // 创建一个新的winRows this.winRows = []; for (let i = 0; i cols: [] }) } for (let i = 0; i if (oriArray.length > 0) { this.winRows[i].cols.push({ span: 24 / rows, url: oriArray[0].url, title: oriArray[0].title, cameraId: oriArray[0].cameraId }) oriArray.splice(0, 1); } else { this.winRows[i].cols.push({ span: 24 / rows, url: '', title: '', cameraId: '' }) } } } } #关闭播放窗口 close(colData) { colData.url = '' colData.title = '' colData.cameraId = '' }, #点击摄像头播放 playVideo(treeNode) { for (let i = 0; i if (this.winRows[i].cols[j].url === '') { const params = { t: Math.random(), code: treeNode.id, protocol: 'hls', streamType: '1' }; getPreviewURLs(params).then(data => { if (data.code === '0') { let purl = data.data.url; if (window.location.host.indexOf('2.2.2.2') === 0) { purl = data.data.url.replace('36.32.24.38', '2.2.2.2'); } const title = treeNode.lineName + '>' + treeNode.workareaName + '>' + treeNode.siteName; // + '>' + treeNode.title; this.winRows[i].cols[j].cameraId = treeNode.id; this.winRows[i].cols[j].url = purl; this.winRows[i].cols[j].title = title; } }); isBreak = true; break; } else { continue; } } if (isBreak) { break; } } },因为牵扯到多分屏的切换，切换后所有播放组件会重新加载。 |
属性(Property)
【本文地址】
今日新闻 |
推荐新闻 |